<template>
  <div class="profile-container">
    <van-nav-bar title="个人信息" left-arrow @click-left="onClickLeft" />

    <div class="list">
      <input
        v-show="false"
        type="file"
        ref="input"
        @change="changeHandle"
        name=""
      />
      <van-cell title="头像" @click="$refs.input.click()">
        <!-- 使用 title 插槽来自定义标题 -->
        <template slot="extra">
          <img
            style="width:20px;height:20px;border-radius:50%"
            :src="userInfo.photo"
            alt=""
          />
          <van-icon name="arrow" />
        </template>
      </van-cell>
      <van-cell
        @click="nickname = true"
        title="昵称"
        :value="userInfo.name"
        is-link
      />

      <van-cell
        @click="gender = true"
        title="性别"
        is-link
        :value="userInfo.gender == 1 ? '男' : '女'"
      />

      <van-cell
        @click="birth = true"
        title="生日"
        :value="userInfo.birthday"
        is-link
      />
    </div>

    <!-- 弹出层 -->
    <van-action-sheet v-model="birth" :round="false">
      <!-- 时间组件 -->
      <van-datetime-picker
        @cancel="onCancel"
        v-model="currentDate"
        type="date"
        :min-date="minDate"
        :max-date="maxDate"
      />
      <!-- 时间组件 -->
    </van-action-sheet>

    <!-- 性别 -->
    <!-- 弹出层 -->
    <van-action-sheet v-model="gender" :round="false">
      <van-picker
        show-toolbar
        title="标题"
        :columns="columns"
        :default-index="2"
      />
      <!-- 时间组件 -->
    </van-action-sheet>

    <!--  昵称 -->
    <van-popup v-model="nickname" position="bottom" :style="{ height: '100%' }">
      <nickname @namesuccess='namesuccess' @close='nickname=false' :nickname='userInfo.name'></nickname>
    </van-popup>

    <van-popup v-model="photo" position="bottom" :style="{ height: '100%' }">
      <photo
        @cancel="photo = false"
        @success="success"
        :imgsrc="imgsrc"
      ></photo>
    </van-popup>
  </div>
</template>

<script>
import photo from "./component/photo";
import nickname from "./component/nickname";

import { getUserProfileApi } from "@/api";
export default {
  components: {
    photo,
    nickname
  },
  data() {
    return {
      birth: false,
      minDate: new Date(2020, 0, 1),
      maxDate: new Date(2025, 10, 1),
      currentDate: new Date(),

      /* 性别 */
      gender: false,
      columns: [
        // 第一列
        {
          values: ["男", "女"],
          defaultIndex: 2
        }
      ],

      /* 昵称 */
      nickname: false,
      height: 0,

      imgsrc: null,
      photo: false,

      userInfo: {}
    };
  },
  created() {
    this.getUserInfo();
  },
  methods: {
    // btn(){
    //   console.log(111);
    //   console.log();
    //   this.$refs.input.click()
    // },
    /* 表单的change事件 */
    changeHandle(e) {
      //console.log(e,22222);

      var file = e.target.files[0]; //获取选中的图片的资源
      // console.log(file,66666);
      this.imgsrc = window.URL.createObjectURL(file); //  将获取的图片资源创建一个blob  文件资源对象
      this.photo = true;
    },
    onClickLeft() {
      this.$router.go(-1);
    },

    /* 点击弹出层  取消按钮 */
    onCancel() {
      console.log(1111);
      this.birth = false;
    },
    open() {
      console.log(11111);
      //获取屏幕高度
      this.$nextTick(_ => {
        console.log(window.screen.height, 4455);
        this.height = window.screen.height;
        // document.querySelector('.nickname').style.height =
        //   window.screen.height + 'px'
      });
    },
    async getUserInfo() {
      //console.log();
      const { data: res } = await getUserProfileApi();
      console.log(res, 655343);
      this.userInfo = res.data;
    },
    success() {
      this.photo = false; //关闭对话框
      this.getUserInfo(); //  重新获取最新的数据
    },

    //  更改用户昵称
    namesuccess(){
      this.nickname=false;
      this.getUserInfo(); //  重新获取最新的数据
    }
  }
};
</script>
<style scoped lang="less">
.profile-container {
  /deep/.van-nav-bar {
    background-color: #3296fa;
    .van-icon {
      color: #fff;
    }

    .van-nav-bar__title {
      color: #fff;
    }
  }

  .van-cell {
    align-items: center;
  }

  .nickname {
    max-height: unset;
  }

  .van-nav-bar.propActive {
    background-color: #fff;
    /deep/.van-nav-bar__title {
      color: #333;
    }
  }

  .van-popup .text {
    text-align: center;
  }
}
</style>
